<template>
  <div style="position: relative;width: 100%;height: 100%;">
    <el-carousel :interval="10000" height="580px" arrow="always">
      <el-carousel-item v-for="scenery in informationData" :key="scenery.id">
        <a href>
          <img style="width:100%;height:100%" :src="scenery.img" />
        </a>
        <div class="mask_home">
          <span class="day">10</span>/Apr.2020
          <h3>{{ scenery.msg }}</h3>
        </div>
      </el-carousel-item>
    </el-carousel>
    <div class="sales-entrys-container-innerimg clearfix">
      <a class="sales-entrys-item entrys-bg-sales" href="/sales/">
        <div class="sales-entrys-title">自由行</div>
        <div class="sales-entrys-subtitle">旅行就要更自在</div>
      </a>
      <a class="sales-entrys-item entrys-bg-group" href="/sales/0-0-0-0-0-0-0-0.html?group=4">
        <div class="sales-entrys-title">跟团游</div>
        <div class="sales-entrys-subtitle">行程透明省心游</div>
      </a>
      <a class="sales-entrys-item entrys-bg-localdeals" href="/localdeals/">
        <div class="sales-entrys-title">当地游</div>
        <div class="sales-entrys-subtitle">最地道的玩法体验</div>
      </a>
      <a class="sales-entrys-item entrys-bg-flight" href="/flight/">
        <div class="sales-entrys-title">机票</div>
        <div class="sales-entrys-subtitle">特惠一折起</div>
      </a>
      <a class="sales-entrys-item entrys-bg-hotel" href="/hotel/">
        <div class="sales-entrys-title">订酒店</div>
        <div class="sales-entrys-subtitle">一键全网比价</div>
      </a>
      <a class="sales-entrys-item entrys-bg-visa" href="/sales/visa/">
        <div class="sales-entrys-title">签证</div>
        <div class="sales-entrys-subtitle">出签率高服务佳</div>
      </a>
      <a class="sales-entrys-item entrys-bg-ship" href="/sales/0-0-0-5-0-0-0-0.html">
        <div class="sales-entrys-title">邮轮</div>
        <div class="sales-entrys-subtitle">移动的海上城堡</div>
      </a>
    </div>
    <div class="index-wrap">
      <el-container>
        <el-aside class="left-menu" width="360px">
          <div class="index-left-block">
            <div class="asidebox-hd">
              <a class="title">美食景点</a>
              <a class="hd-right" href>专栏首页</a>
            </div>
            <!-- <slider :sliders="deliciousFoodDt"></slider> -->

            <div class="container-list food">
              <el-carousel height="240px">
                <el-carousel-item v-for="item in deliciousFoodDt" :key="item.id">
                  <a :href="item.href" target="_blank">
                    <img width="100%" height="150px" :src="item.img" />
                  </a>
                  <div class="mask">
                    <h3 class="title">
                      <a :href="item.href">{{ item.title }}</a>
                    </h3>
                    <p>{{ item.description }}</p>
                  </div>
                </el-carousel-item>
              </el-carousel>
            </div>
          </div>
          <div class="index-left-block">
            <div class="asidebox-hd">
              <a class="title">旅行资讯</a>
              <a class="hd-right" href>更多</a>
            </div>
            <div class="container-list pic_news">
              <!-- <template v-for="inf in informationData" v-if="inf.img">
              <img :src="inf.img" :alt="inf.title" />
              <h3>
                <a href="javascript:void(0);">{{ inf.title }}</a>
              </h3>
              <p>{{ inf.msg }}</p>
              </template>-->
              <ul>
                <li v-for="inf in informationData" :key="inf.id">
                  <span>{{ inf.time }}</span>
                  <a href="javascript:void(0);">【{{ inf.title }}】</a>
                </li>
              </ul>
            </div>
          </div>
          <div class="index-left-block">
            <div class="asidebox-hd">
              <a class="title">旅行攻略</a>
              <a class="hd-right" href>更多</a>
            </div>
            <div class="container-list product_list">
              <img :src="raidersData.img" :alt="raidersData.title" />
              <h3>
                <a href="javascript:void(0);">{{ raidersData.title }}</a>
              </h3>
              <div class="address-tag-container">
                <el-tag
                  v-for="address in raidersAddressDt"
                  :key="address.id"
                  type="success"
                >{{ address }}</el-tag>
              </div>
            </div>
          </div>
        </el-aside>
        <el-main style="padding: 15px 0;">
          <div class="tn-item clearfix">
            <div class="tn-image">
              <a @click="look" target="_blank">
                <img
                  class
                  data-src="http://n1-q.mafengwo.net/s16/M00/77/9B/CoUBUl57RqiAVOb5AAh-5H2toKI874.jpg?imageMogr2%2Fthumbnail%2F%21220x150r%2Fstrip%2Fgravity%2FCenter%2Fcrop%2F%21220x150%2Fquality%2F90"
                  data-rt-src="http://n1-q.mafengwo.net/s16/M00/77/9B/CoUBUl57RqiAVOb5AAh-5H2toKI874.jpg?imageMogr2%2Fthumbnail%2F%21440x300r%2Fstrip%2Fgravity%2FCenter%2Fcrop%2F%21440x300%2Fquality%2F90"
                  src="http://n1-q.mafengwo.net/s16/M00/77/9B/CoUBUl57RqiAVOb5AAh-5H2toKI874.jpg?imageMogr2%2Fthumbnail%2F%21220x150r%2Fstrip%2Fgravity%2FCenter%2Fcrop%2F%21220x150%2Fquality%2F90"
                  style="display: inline;"
                />
              </a>
            </div>
            <div class="tn-wrapper">
              <dl>
                <dt>
                  <a @click="look" target="_blank">云南慢生活——七日佛系“淋雨”指南</a>
                </dt>
                <dd>
                  <a
                    @click="look"
                    target="_blank"
                  >云南 ，是风花雪月，是彩云之南，那里还有一个叫做 香格里拉 的地方！ 出行前一天，看了看机票， 厦门 到 香格里拉 没有直飞的航班，于是上网搜了几篇 香格里拉 游玩攻略，满屏都是七日、九...</a>
                </dd>
              </dl>
              <div class="tn-extra">
                <span class="tn-ding">
                  <a
                    class="btn-ding"
                    href="javascript:;"
                    data-japp="articleding"
                    data-iid="18936739"
                    data-vote="245"
                    rel="nofollow"
                  ></a>
                  <em id="topvote18936739">245</em>
                </span>
                <span class="tn-place">
                  <i></i>
                  <a
                    href="javascript:void(0);"
                    class="_j_gs_item"
                    rel="nofollow"
                    data-name="云南"
                    data-objid="12711"
                    data-type="2"
                  >云南</a>，by
                </span>
                <span class="tn-user">
                  <a href="/u/79759894.html" target="_blank" rel="nofollow">
                    <img
                      src="http://b1-q.mafengwo.net/s15/M00/D1/32/CoUBGV5GUQmAZn5mAACF4zFtIRo36.jpeg?imageMogr2%2Fthumbnail%2F%2116x16r%2Fgravity%2FCenter%2Fcrop%2F%2116x16%2Fquality%2F90"
                    />
                    祖贤阿姨
                  </a>
                </span>
                <span class="tn-nums">
                  <i></i>5760/87
                </span>
              </div>
            </div>
          </div>
          <div class="tn-item clearfix">
            <div class="tn-image">
              <a @click="look" target="_blank">
                <img
                  src="http://b1-q.mafengwo.net/s16/M00/94/0F/CoUBUl58WTGABcKeAAT28VuF_UU908.JPG?imageMogr2%2Fthumbnail%2F%21220x150r%2Fstrip%2Fgravity%2FCenter%2Fcrop%2F%21220x150%2Fquality%2F90"
                />
              </a>
            </div>
            <div class="tn-wrapper">
              <dl>
                <dt>
                  <a @click="look" target="_blank">在2019的新年里邂逅帝都的第一场雪</a>
                </dt>
                <dd>
                  <a
                    @click="look"
                    target="_blank"
                  >“只要携手并肩 没有哪个冬天不可逾越 只要共同守望 没有哪个春天不会来临” 此刻 春上枝头 又是一个生机盎然的季节 2020的春节注定难忘（难以忘记）, 我们迎来了意外的长假， 不能走出家门...</a>
                </dd>
              </dl>
              <div class="tn-extra">
                <span class="tn-ding">
                  <em id="topvote18967297">63</em>
                  <a
                    class="btn-ding"
                    href="javascript:;"
                    data-japp="articleding"
                    data-iid="18967297"
                    data-vote="63"
                    rel="nofollow"
                  ></a>
                </span>
                <span class="tn-place">
                  <i></i>
                  <a
                    href="javascript:void(0);"
                    class="_j_gs_item"
                    rel="nofollow"
                    data-name="北京"
                    data-objid="10065"
                    data-type="2"
                  >北京</a>，by
                </span>
                <span class="tn-user">
                  <a href="/u/58140804.html" target="_blank" rel="nofollow">
                    <img
                      src="http://b1-q.mafengwo.net/s16/M00/5C/E7/CoUBUl5_aVqAFXvoAC66XKCF-tY99.jpeg?imageMogr2%2Fthumbnail%2F%2116x16r%2Fgravity%2FCenter%2Fcrop%2F%2116x16%2Fquality%2F90"
                    />
                    白日梦想家
                  </a>
                </span>
                <span class="tn-nums">
                  <i></i>1283/9
                </span>
              </div>
            </div>
          </div>
          <div class="tn-item clearfix">
            <div class="tn-image">
              <a @click="look" target="_blank">
                <img
                  src="http://b1-q.mafengwo.net/s15/M00/36/40/CoUBGV520mOARypBABWu54qqh3A874.jpg?imageMogr2%2Fthumbnail%2F%21220x150r%2Fstrip%2Fgravity%2FCenter%2Fcrop%2F%21220x150%2Fquality%2F90"
                />
              </a>
            </div>
            <div class="tn-wrapper">
              <dl>
                <dt>
                  <a @click="look" target="_blank">2019年端午节香港，带娃儿来一趟美食之旅</a>
                </dt>
                <dd>
                  <a
                    @click="look"
                    target="_blank"
                  >前言 香港 ，一个五味杂陈的城市。 鸟笼般的城市里，有着一间间看不到风景的房间； 电影中的那几张脸，张国荣、周润发、张曼玉、梁朝伟...... 最质传统的茶餐厅，菠萝油、车仔面、咖喱鱼丸...</a>
                </dd>
              </dl>
              <div class="tn-extra">
                <span class="tn-ding">
                  <a
                    class="btn-ding"
                    href="javascript:;"
                    data-japp="articleding"
                    data-iid="18969685"
                    data-vote="123"
                    rel="nofollow"
                  ></a>
                  <em id="topvote18969685">123</em>
                </span>
                <span class="tn-place">
                  <i></i>
                  <a
                    href="javascript:void(0);"
                    class="_j_gs_item"
                    rel="nofollow"
                    data-name="香港"
                    data-objid="10189"
                    data-type="2"
                  >香港</a>，by
                </span>
                <span class="tn-user">
                  <a href="/u/8729332.html" target="_blank" rel="nofollow">
                    <img
                      src="http://p1-q.mafengwo.net/s1/M00/0F/2F/wKgBm02WhROb4RvNAAAbXr654dA00.jpeg?imageMogr2%2Fthumbnail%2F%2116x16r%2Fgravity%2FCenter%2Fcrop%2F%2116x16%2Fquality%2F90"
                    />
                    GREATHIT
                  </a>
                </span>
                <span class="tn-nums">
                  <i></i>2896/35
                </span>
              </div>
            </div>
          </div>
          <div class="tn-item clearfix">
            <div class="tn-image">
              <a @click="look" target="_blank">
                <img
                  src="http://b1-q.mafengwo.net/s15/M00/EA/7D/CoUBGV5vhq-AKdOfAAeNB4VNOZU431.jpg?imageMogr2%2Fthumbnail%2F%21220x150r%2Fstrip%2Fgravity%2FCenter%2Fcrop%2F%21220x150%2Fquality%2F90"
                />
              </a>
            </div>
            <div class="tn-wrapper">
              <dl>
                <dt>
                  <a @click="look" target="_blank">北京百景图，108景，景景各不同（未完待续）</a>
                </dt>
                <dd>
                  <a
                    @click="look"
                    target="_blank"
                  >有一句俗话： 北京 一百零八景，景景各不同。 北京 到底有多少景点，谁也不知道，但这座数朝历史古都里汇集着中华历史中最有精髓的人文历史与自然景观，108景对于一个生活在帝都 北京 的人...</a>
                </dd>
              </dl>
              <div class="tn-extra">
                <span class="tn-ding">
                  <a
                    class="btn-ding"
                    href="javascript:;"
                    data-japp="articleding"
                    data-iid="18933640"
                    data-vote="134"
                    rel="nofollow"
                  ></a>
                  <em id="topvote18933640">134</em>
                </span>
                <span class="tn-place">
                  <i></i>
                  <a
                    href="javascript:void(0);"
                    class="_j_gs_item"
                    rel="nofollow"
                    data-name="北京"
                    data-objid="10065"
                    data-type="2"
                  >北京</a>，by
                </span>
                <span class="tn-user">
                  <a href="/u/10103361.html" target="_blank" rel="nofollow">
                    <img
                      src="http://n1-q.mafengwo.net/s14/M00/C7/06/wKgE2lz5nmGAIL8SAAC6XHLb5yU98.jpeg?imageMogr2%2Fthumbnail%2F%2116x16r%2Fgravity%2FCenter%2Fcrop%2F%2116x16%2Fquality%2F90"
                    />
                    月轩越影
                  </a>
                </span>
                <span class="tn-nums">
                  <i></i>3708/24
                </span>
              </div>
            </div>
          </div>
          <div class="tn-item clearfix">
            <div class="tn-image">
              <a @click="look" target="_blank">
                <img
                  src="http://b1-q.mafengwo.net/s13/M00/95/8A/wKgEaVx2MmyAJuY0AAoj7EDFTVw52.jpeg?imageMogr2%2Fthumbnail%2F%21220x150r%2Fstrip%2Fgravity%2FCenter%2Fcrop%2F%21220x150%2Fquality%2F90"
                />
              </a>
            </div>
            <div class="tn-wrapper">
              <dl>
                <dt>
                  <a @click="look" target="_blank">云南以北，是名山大川，是星辰大海</a>
                </dt>
                <dd>
                  <a
                    @click="look"
                    target="_blank"
                  >序 致梦想，致远方。 刚上大学，日子过得并不太好；大抵是在很好的元素里参杂了一些不太好的成分，课后我总是待在实验室，生活也不过是课室--实验室--宿舍的三点一线；偶尔踢踢球，搞点小比...</a>
                </dd>
              </dl>
              <div class="tn-extra">
                <span class="tn-ding">
                  <a
                    class="btn-ding"
                    href="javascript:;"
                    data-japp="articleding"
                    data-iid="18998281"
                    data-vote="59"
                    rel="nofollow"
                  ></a>
                  <em id="topvote18998281">59</em>
                </span>
                <span class="tn-place">
                  <i></i>
                  <a
                    href="javascript:void(0);"
                    class="_j_gs_item"
                    rel="nofollow"
                    data-name="云南"
                    data-objid="12711"
                    data-type="2"
                  >云南</a>，by
                </span>
                <span class="tn-user">
                  <a href="/u/72223599.html" target="_blank" rel="nofollow">
                    <img
                      src="http://p1-q.mafengwo.net/s11/M00/09/D0/wKgBEFtUaI6AeAbiAAiD_SFFOhI49.jpeg?imageMogr2%2Fthumbnail%2F%2116x16r%2Fgravity%2FCenter%2Fcrop%2F%2116x16%2Fquality%2F90"
                    />
                    ✈️🔭🇩🇪🐳🔟
                  </a>
                </span>
                <span class="tn-nums">
                  <i></i>1631/12
                </span>
              </div>
            </div>
          </div>
          <div class="tn-item clearfix">
            <div class="tn-image">
              <a @click="look" target="_blank">
                <img
                  src="http://p1-q.mafengwo.net/s16/M00/80/FC/CoUBUl6GjMCACXkkABqU9iSEN7M540.jpg?imageMogr2%2Fthumbnail%2F%21220x150r%2Fstrip%2Fgravity%2FCenter%2Fcrop%2F%21220x150%2Fquality%2F90"
                />
              </a>
            </div>
            <div class="tn-wrapper">
              <dl>
                <dt>
                  <a @click="look" target="_blank">日本，东北自驾风情录</a>
                </dt>
                <dd>
                  <a
                    @click="look"
                    target="_blank"
                  >日本 东北 地区位于 本州 东北 端，范围包括青森、岩手、秋田、宫城、山形和福岛等六个行政县。自古原是阿伊努族人的居住地，“陆奥”的古称被一直沿用至今。 东北 地区伴随着一年四季的更...</a>
                </dd>
              </dl>
              <div class="tn-extra">
                <span class="tn-ding">
                  <a
                    class="btn-ding"
                    href="javascript:;"
                    data-japp="articleding"
                    data-iid="19016725"
                    data-vote="47"
                    rel="nofollow"
                  ></a>
                  <em id="topvote19016725">47</em>
                </span>
                <span class="tn-place">
                  <i></i>
                  <a
                    href="javascript:void(0);"
                    class="_j_gs_item"
                    rel="nofollow"
                    data-name="日本"
                    data-objid="10183"
                    data-type="2"
                  >日本</a>，by
                </span>
                <span class="tn-user">
                  <a href="/u/17053471.html" target="_blank" rel="nofollow">
                    <img
                      src="http://p1-q.mafengwo.net/s4/M00/97/AA/wKgByU-9JeWOLemiAAAm1CMK4fI06.jpeg?imageMogr2%2Fthumbnail%2F%2116x16r%2Fgravity%2FCenter%2Fcrop%2F%2116x16%2Fquality%2F90"
                    />
                    高山景行
                  </a>
                </span>
                <span class="tn-nums">
                  <i></i>943/48
                </span>
              </div>
            </div>
          </div>
          <div class="tn-item clearfix">
            <div class="tn-image">
              <a @click="look" target="_blank">
                <img
                  src="http://p1-q.mafengwo.net/s15/M00/EC/1D/CoUBGV4K2zSAcV4mABRm7DlJv4E266.jpg?imageMogr2%2Fthumbnail%2F%21220x150r%2Fstrip%2Fgravity%2FCenter%2Fcrop%2F%21220x150%2Fquality%2F90"
                />
              </a>
            </div>
            <div class="tn-wrapper">
              <dl>
                <dt>
                  <a @click="look" target="_blank">轮回800多年的遗世书卷|梅里雪山，在红尘间的香巴拉（梅里外...</a>
                </dt>
                <dd>
                  <a
                    @click="look"
                    target="_blank"
                  >缘何|题序 秋风微寒，穿金为何？ 初雪淡漠，白头因谁？ 春夏之间，梦境又几许？ 我本是凡人，因你，我才镀了金身。 今夕何夕，纵使轮回，亦然不负。 春末夏初，丰年瑞雪，窗外的阴霾又复放...</a>
                </dd>
              </dl>
              <div class="tn-extra">
                <span class="tn-ding">
                  <a
                    class="btn-ding"
                    href="javascript:;"
                    data-japp="articleding"
                    data-iid="19027528"
                    data-vote="102"
                    rel="nofollow"
                  ></a>
                  <em id="topvote19027528">102</em>
                </span>
                <span class="tn-place">
                  <i></i>
                  <a
                    href="javascript:void(0);"
                    class="_j_gs_item"
                    rel="nofollow"
                    data-name="梅里雪山"
                    data-objid="10806"
                    data-type="2"
                  >梅里雪山</a>，by
                </span>
                <span class="tn-user">
                  <a href="/u/72447706.html" target="_blank" rel="nofollow">
                    <img
                      src="http://p1-q.mafengwo.net/s11/M00/74/67/wKgBEFr093eAWBEQAACWojjs23c24.jpeg?imageMogr2%2Fthumbnail%2F%2116x16r%2Fgravity%2FCenter%2Fcrop%2F%2116x16%2Fquality%2F90"
                    />
                    小布行路上
                  </a>
                </span>
                <span class="tn-nums">
                  <i></i>6560/9
                </span>
              </div>
            </div>
          </div>
          <!-- <el-carousel :interval="500000" height="420px" arrow="always">
            <el-carousel-item v-for="scenery in nepalSceneryDt" :key="scenery.id">
              <a href>
                <img width="908px" height="500px" :src="scenery.src" />
              </a>
              <div class="mask">
                <h3>{{ scenery.name }}</h3>
              </div>
            </el-carousel-item>
          </el-carousel>-->
          <!-- <div class="fiery-activity">
            <el-container>
              <el-aside width="252px">
                <a
                  class="xinchun-link"
                  target="_blank"
                  href="http://www.tuniu.com/szt/SpringFestival2018/2702.html"
                ></a>
                <div class="xinchun-memu">
                  <ul>
                    <li class="xinchun_item" v-for="xcList in xinchunData" :key="xcList.id">
                      <a target="_blank" :href="xcList.href">
                        {{
                        xcList.title
                        }}
                      </a>
                    </li>
                  </ul>
                </div>
              </el-aside>
              <el-main class="fiery-activity-main">
                <el-row>
                  <el-col :span="11" v-for="list in sellWellDt" :key="list.id" v-show="list.id < 3">
                    <div class="grid-content">
                      <a target="_blank" :href="list.href">
                        <img :src="list.img" :alt="list.title" />
                      </a>
                      <div class="activity_mess">
                        <a target="_blank" :href="list.href">
                          <span>&lt;{{ list.title }}&gt;</span>
                          <br />
                          {{ list.msg }}
                        </a>
                      </div>
                      <div class="activity_price">
                        <el-row>
                          <el-col :span="12">
                            ¥
                            <span>{{ list.price }}</span>起
                          </el-col>
                          <el-col :span="12">{{ list.feedback }}</el-col>
                        </el-row>
                      </div>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="11" v-for="list in sellWellDt" :key="list.id" v-show="list.id > 2">
                    <div class="grid-content">
                      <a target="_blank" :href="list.href">
                        <img :src="list.img" :alt="list.title" />
                      </a>
                      <div class="activity_mess">
                        <a target="_blank" :href="list.href">
                          <span>&lt;{{ list.title }}&gt;</span>
                          {{ list.msg }}
                        </a>
                      </div>
                      <div class="activity_price">
                        <el-row>
                          <el-col :span="12">
                            ¥
                            <span>{{ list.price }}</span>起
                          </el-col>
                          <el-col :span="12">{{ list.feedback }}</el-col>
                        </el-row>
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </el-main>
            </el-container>
          </div>-->
        </el-main>
      </el-container>
    </div>
  </div>
</template>
<script>
// import Slider from '@/components/slider/slider.vue'
export default {
  // components: { Slider },
  data() {
    return {
      queryInfo: {
        name: '',
        rank: '',
        position: '',
        // 当前的页数
        pagenum: 1,
        // 当前每页显示多少条数据
        pagesize: 5
      },
      informationData: [
        {
          id: 1,
          title: '520 我在路上等着你！',
          msg: '活动时间：5月20日—5月25日获奖公布时间：5月26日',
          time: '2017-05-20',
          img: require('../../assets/images/1.jpg')
        },
        {
          id: 2,
          title: '达人访谈 用户篇',
          msg: '“有为屌丝”在路上',
          time: '2017-06-20',
          img: require('../../assets/images/2.jpg')
        },
        {
          id: 3,
          title: '有奖活动',
          msg: '写给父亲三行书信',
          time: '2017-06-22',
          img: require('../../assets/images/3.jpg')
        },
        {
          id: 4,
          title: '朋友，请晒出你的足迹',
          msg: '活动获奖公告',
          time: '2017-07-01',
          img: require('../../assets/images/4.jpg')
        },
        {
          id: 5,
          title: '旅行语录',
          msg: '邂逅——最美的风景永远在路上',
          time: '2017-08-05',
          img: require('../../assets/images/5.jpg')
        }
      ],
      raidersData: {
        id: 5,
        title: '10天尼泊尔自由行游记兼攻略',
        msg:
          ' 加德满都～帕坦～博卡拉～奇特旺，从签证、机票、服装、生活用品、药品汇率解析如何玩转尼泊尔。内含闺蜜拍照技巧分享，想去尼泊尔吃喝玩乐的小伙伴速速get吧。',
        time: '2017-08-05',
        img: require('../../assets/images/css.jpg')
      },
      raidersAddressDt: ['加德满都', '帕坦', '博卡拉', '哈尔滨', '奇特旺'],
      deliciousFoodDt: [
        {
          id: 1,
          href: 'http://www.mafengwo.cn/cy/10035/8962.html',
          title: '辣到忘不掉的美味火锅',
          description:
            '川菜中最具革命性的是火锅川菜中最具革命性的是火锅川菜中最具革命性的是火锅，锅底味小吃，烧烤，这一风多样...',
          img: require('../../assets/images/meishi1.jpeg')
        },
        {
          id: 2,
          href: 'http://www.mafengwo.cn/cy/10035/13359.html',
          title: '成都人气川菜餐厅推荐',
          description:
            '川菜早在千余年前就颇味小吃，烧烤，这一风千余年前就颇负盛菜早在千余年前就颇负盛名，以其色菜早在千余年前就颇负盛名...',
          img: require('../../assets/images/meishi2.jpeg')
        },
        {
          id: 3,
          href: 'http://www.mafengwo.cn/cy/10035/8959.html',
          title: '最受欢迎的风味烧烤店',
          description:
            '烧烤，这一风味小吃，烧烤，这一风味小吃，烧烤，这一风味小吃，烧烤，这一风味小吃烧烤，这一风味小吃烧烤，这一风味小吃其火...',
          img: require('../../assets/images/meishi3.jpeg')
        },
        {
          id: 4,
          href: 'http://www.mafengwo.cn/cy/10035/13364.html',
          title: '私享宽窄巷子人气餐厅',
          description:
            '在宽窄巷子里味小吃，烧烤，这一风味小吃，烧烤，这一风，在宽窄巷子里在宽窄巷子里在宽窄巷子里在宽窄巷子里选择一处佳地...',
          img: require('../../assets/images/meishi4.jpeg')
        },
        {
          id: 5,
          href: 'http://www.mafengwo.cn/cy/10035/13363.html',
          title: '锦里的超人气风味美食店',
          description:
            '尽管锦里并不以美食为主，尽管锦里并不以美食为主，尽管锦里并不以美食为主，尽管锦里并不以美食为主，但其...',
          img: require('../../assets/images/meishi5.jpeg')
        }
      ],
      nepalSceneryDt: [],
      xinchunData: [
        {
          id: 1,
          title: '新春出境 好礼换购',
          href: 'http://www.tuniu.com/szt/SpringFestival2018/2702.html'
        },
        {
          id: 2,
          title: '海南新春行 享壕礼',
          href: 'http://www.tuniu.com/szt/hainanwintour/2702.html'
        },
        {
          id: 3,
          title: '东北雪国 满5000元减50元',
          href: 'http://www.tuniu.com/szt/17winortheast/2702.html'
        },
        {
          id: 4,
          title: '邮轮年终特惠 1599起',
          href: 'http://www.tuniu.com/szt/youlunnianzhong/2702.html'
        }
      ],
      sellWellDt: [
        {
          id: 1,
          title: '泰国曼谷-芭提雅机票+当地5晚6日游',
          msg:
            '美食之旅 发班3年老字号 1晚泳池别墅  希尔顿下午茶 杜拉拉水上市场 无自费 五星海航 微信管家',
          img: require('../../assets/images/chunjie1.jpg'),
          href: 'http://www.tuniu.com/tour/210125600',
          price: '4009',
          feedback: '满意度 91%'
        },
        {
          id: 2,
          title: '日本本州8日游',
          msg:
            '西安直飞大阪，本州环岛，优选世界文化遗产白川乡，升级一晚温泉酒店，穿日式和服浴衣体验日式温泉，东京一天自由活动',
          img: require('../../assets/images/chunjie2.jpg'),
          href: 'http://www.tuniu.com/tour/210140583',
          price: '6031',
          feedback: '满意度 99%'
        },
        {
          id: 3,
          title: '泰国-普吉岛6或7日游',
          msg:
            '西安直飞，连住2或3晚芭东凯悦酒店或同级，日游斯米兰，快艇珊瑚岛，神仙半岛，浮潜，4顿特色餐，含600礼包',
          img: require('../../assets/images/chunjie3.jpg'),
          href: 'http://www.tuniu.com/tour/210162944',
          price: '3039',
          feedback: '满意度 92%'
        },
        {
          id: 4,
          title: '日本东京-大阪-京都-富士山7日游',
          msg:
            '两点进出，东京大阪全天自由活动含车接送，指定酒店，鲍鱼海鲜锅、蟹道乐，27种烤肉自助，46KG行李直挂',
          img: require('../../assets/images/chunjie4.jpg'),
          href: 'http://www.tuniu.com/tour/210147716',
          price: '7927',
          feedback: '满意度 97%'
        }
      ]
    }
  },
  methods: {
    look() {
      this.$router.push({
        name: 'strategy'
      })
    },
    async getSceneryList() {
      // this.$http.defaults.headers['IP'] = location.href.toString()
      // this.$http.defaults.headers['token'] = window.sessionStorage.getItem(
      //   'token'
      // )
      const { data: res } = await this.$http.get('/scenerys', {
        params: this.queryInfo
      })
      if (res.status !== 201) {
        return this.$message.error('获取景区列表失败！')
      }
      // console.log(res.scenery)
      this.nepalSceneryDt = res.scenery
    }
  },
  mounted() {
    this.getSceneryList()
  }
}
</script>
<style lang="scss" scoped>
.tn-item:hover {
  background-color: #f8f8f8;
  // padding: 15px;
  // margin: 0 -15px;
}
.tn-item {
  position: relative;
  padding: 15px 20px;
  height: 150px;
  width: 800px;
  dl {
    height: 117px;
  }
  dd {
    line-height: 20px;
    font-size: 14px;
    overflow: hidden;
    a {
      color: #666;
    }
  }
  dt {
    height: 26px;
    margin-bottom: 10px;
    font-size: 18px;
    line-height: 26px;
    a {
      width: 420px;
      height: 26px;
      display: block;
      color: #333;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  .tn-image {
    float: left;
    width: 220px;
    height: 150px;
    position: relative;
    img {
      width: 250px;
      height: 150px;
    }
  }
  .tn-wrapper {
    position: absolute;
    left: 300px;
    width: 500px;
    height: 150px;
    .tn-extra {
      position: relative;
      height: 33px;
      overflow: hidden;
      line-height: 33px;
      span {
        display: inline-block;
      }
      .tn-nums {
        font-size: 14px;
        color: #999;
        i {
          float: left;
          margin: 10px 5px 0 0;
          width: 18px;
          height: 14px;
          background-position: -30px -50px !important;
        }
      }
      .tn-place {
        margin-right: 5px;
        i {
          float: left;
          margin: 8px 5px 0 0;
          width: 14px;
          height: 16px;
          background-position: 0 -50px !important;
          overflow: hidden;
        }
        a {
          color: #666;
        }
      }
      .tn-user {
        margin-right: 10px;
        img {
          margin-right: 5px;
          width: 16px;
          height: 16px;
          overflow: hidden;
          border-radius: 50%;
          vertical-align: -3px;
        }
        a {
          background-color: transparent;
          text-decoration: none;
          color: #ff9d00;
          cursor: pointer;
        }
      }
      .tn-ding {
        float: right;
        color: #ff9d00;
        font-size: 14px;
        *width: 100px;
        text-align: right;
        .btn-ding {
          display: inline-block;
          margin-left: 8px;
          width: 38px;
          height: 33px;
          background-position: -60px 0 !important;
          overflow: hidden;
        }
        em {
          position: absolute;
          right: 45px;
          display: inline;
          font-style: normal;
          line-height: 33px;
        }
      }
    }
  }
  .tn-write .btn-add i,
  .tn-extra .btn-ding,
  .tn-extra .tn-place i,
  .tn-extra .tn-nums i {
    background: url(http://css.mafengwo.net/images/index-sprites9.png) no-repeat;
  }
}

.index-wrap {
  width: 1270px;
  height: 100%;
  margin-left: 365px;
}

.index-left-block {
  margin-bottom: 30px;
  background: #fff;
  box-shadow: 0 0 1px #ddd;
  padding-bottom: 5px;
  .asidebox-hd {
    padding: 12px 12px 10px 12px;
    height: 35px;
    line-height: 35px;
    .title {
      // float: left;
      font-size: 18px;
      color: #333;
      font-weight: normal;
      cursor: pointer;
    }
    .hd-right {
      float: right;
      color: #999;
      cursor: pointer;
    }
  }
}

.index-wrap .index-left-block h2 {
  /* background: #4fc08d; */
  color: #333;
  padding: 10px 15px;
  margin-bottom: 20px;
  font-size: 18px;
  font-family: Arial, 'Lucida Grande', 'Microsoft Yahei', 'Hiragino Sans GB',
    'Hiragino Sans GB W3', SimSun, 'PingFang SC', STHeiti;
  /* color: #666; */
}

.container-list.pic_news {
  padding: 0 15px 0 0;
}

.container-list.pic_news h3 {
  text-align: right;
}

.pic_news img {
  float: left;
  margin: 0 5px;
}

.pic_news img {
  width: 113px;
  height: 77px;
}

.pic_news p {
  font-size: 14px;
  padding: 8px 0;
  color: #928c8d;
}

.pic_news ul > li span {
  float: right;
  color: #999;
}

.pic_news a,
.product_list a {
  color: #555;
  text-decoration: none;
}

.pic_news li {
  padding-left: 10px;
  margin: 8px;
  border-bottom: 1px dotted #ccc;
  height: 17px;
  line-height: 17px;
}

.container-list.product_list img {
  width: 315px;
  padding: 0 22px;
}

.container-list.product_list h3 {
  text-align: center;
  padding-top: 10px;
}

.container-list.product_list p {
  padding: 15px;
  text-indent: 35px;
}

.address-tag-container {
  padding: 13px 15px;
}

.address-tag-container span {
  cursor: default;
}

.container-list.food {
  width: 328px;
  margin: 0 auto;
}

.container-list.food .mask,
.el-carousel__item .mask {
  position: absolute;
  bottom: 0;
  left: 0;
}

.container-list.food .mask {
  width: 300px;
  padding: 0 10px;
  color: #111;
  .title {
    font-size: 18px;
    color: #333;
    font-weight: normal;
    cursor: pointer;
  }
  p {
    margin-top: 5px;
    height: 60px;
    line-height: 20px;
    font-size: 14px;
    color: #666;
    overflow: hidden;
  }
}
.el-carousel__item .mask {
  width: 300px;
  padding: 0 20px;
}

.el-carousel__item .mask_home {
  position: absolute;
  top: 25px;
  left: 50%;
  margin-left: -500px;
  color: #fff;
  font-size: 26px;
  text-align: left;
  min-width: 1000px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  .day {
    font-size: 38px;
  }
}

.fiery-activity {
  margin-top: 15px;
  background: url('../../assets/images/nianwei.jpeg') 0 0 no-repeat;
  width: 100%;
  background-size: 100%;
}

.fiery-activity .xinchun-link {
  width: 225px;
  height: 225px;
  display: block;
}

.xinchun-memu {
  padding: 0 8px;
}

.xinchun_item {
  background: url('../../assets/images/xinchun.png') 0 0 no-repeat;
  background-size: 100%;
  width: 230px;
  height: 30px;
  margin-bottom: 5px;
  line-height: 30px;
}

.xinchun-memu .xinchun_item a {
  font-family: 'microsoft yahei';
  font-size: 14px;
  font-weight: bold;
  color: #ff6284;
  display: block;
  padding-left: 10px;
}

.fiery-activity-main {
  padding: 20px 0;
}

.fiery-activity-main img {
  width: 245px;
  height: 120px;
}

.el-main.fiery-activity-main .el-col.el-col-11 {
  margin-left: 10px;
  padding: 0 10px 15px 10px;
}

.el-main.fiery-activity-main .grid-content {
  background-color: #fff;
}

.el-main.fiery-activity-main .el-col.el-col-11 a {
  display: block;
  text-align: center;
  padding-top: 8px;
}

.el-main.fiery-activity-main .activity_mess {
  position: absolute;
  padding-bottom: 5px;
  color: #fff;
  width: 245px;
  height: 38px;
  margin-left: 18px;
  bottom: 50px;
  font-size: 12px;
  background-color: rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.el-main.fiery-activity-main .activity_mess a:link,
.el-main.fiery-activity-main .activity_mess a:visited,
.el-main.fiery-activity-main .activity_mess a:hover,
.el-main.fiery-activity-main .activity_mess a:active {
  color: #fff;
}

.el-main.fiery-activity-main .activity_mess a span {
  font-weight: bold;
}

.el-main.fiery-activity-main .activity_price {
  padding: 5px 17px 5px 17px;
}

.activity_price .el-col.el-col-12:nth-child(1) {
  color: #f60;
  font-size: 14px;
  padding-left: 5px;
  margin-top: -5px;
}

.activity_price .el-col.el-col-12:nth-child(1) span {
  font-weight: bold;
  font-size: 20px;
}

.activity_price .el-col.el-col-12:nth-child(2) {
  text-align: right;
  color: #999;
  font-size: 12px;
}
.sales-entrys-container-innerimg {
  width: 100%;
  font-size: 0;
  white-space: nowrap;
  margin: 15px 0 0 435px;
  // border: 1px solid #111;
}
.clearfix:after {
  content: '';
  clear: both;
  height: 0;
  display: block;
  overflow: hidden;
}
.sales-entrys-item .sales-entrys-title {
  display: inline-block;
  height: 22px;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  font-family: PingFangSC-Semibold;
  color: #333;
}
.sales-entrys-item .sales-entrys-subtitle {
  height: 16px;
  padding-top: 1px;
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
  font-family: PingFangSC-Regular;
  color: #9d9d9d;
}
.sales-entrys-container-innerimg .sales-entrys-item {
  width: 127px;
  margin-right: 10px;
  border: 1px solid #e5e5e5;
  background-image: url(https://p3-q.mafengwo.net/s14/M00/73/0B/wKgE2l0HSGuAOI1tAAChEE0vNA4603.png);
  background-repeat: no-repeat;
  background-size: 104px auto;
  background-position-x: 59px;
}
.sales-entrys-container-innerimg .entrys-bg-sales {
  background-position-y: -651px;
}
.sales-entrys-container-innerimg .entrys-bg-group {
  background-position-y: -24px;
}
.sales-entrys-container-innerimg .entrys-bg-localdeals {
  background-position-y: -129px;
}
.sales-entrys-container-innerimg .entrys-bg-flight {
  background-position-y: -441px;
}
.sales-entrys-container-innerimg .entrys-bg-hotel {
  background-position-y: -546px;
}
.sales-entrys-container-innerimg .entrys-bg-visa {
  background-position-y: -335px;
}
.sales-entrys-container-innerimg .entrys-bg-ship {
  background-position-y: -233px;
}
.sales-entrys-item:first-child {
  margin-left: 0;
}
.sales-entrys-item {
  width: 154px;
  height: 47px;
  margin-left: 8px;
  padding-top: 8px;
  padding-left: 7px;
  display: inline-block;
  border-radius: 3px;
  font-family: PingFangSC-Semibold;
  cursor: pointer;
}
a {
  cursor: pointer;
}
</style>
